<template>
	<view class="creatOrderPage">
        <view class="orderInfo">
            <view class="addressCardBox">
            	<addressCard ref="addressCard" class="addressCard"/>
            </view>
            
            <view class="probox">
                <productCardCreatOrder
                    v-for="(item,index) in productData"
                    :key="index"
                    :item="item"
                />
                
                <view class="item">
                    <text class="left">
                        打包费
                        <text>（免打包费）</text>
                    </text>
                    <text class="right">
                        ￥0
                    </text>
                </view>
                <view class="item">
                    <text class="left">
                        配送费（满100件减免配送费）
                    </text>
                    <text class="right">
                        ￥1
                    </text>
                </view>
                <view class="item">
                    <text class="left">
                        平台优惠
                    </text>
                    <text class="right red">
                        ￥10
                    </text>
                </view>
                <view class="divider" />
                <view class="yfBox">
                    <text class="yf">应付：</text>
                    <text class="unit">¥</text>
                    <text class="money">209</text>
                </view>
            </view>
            
            <view class="payTypeBox">
                <view class="title">
                    支付方式
                </view>
                <view class="typeBox">
                    <image class="payIcon" src="/static/img/pay_wx.png" mode="widthFix" />
                    <text>微信支付</text>
                </view>
            </view>
            
            <view class="remakeBox">
                <view class="title">
                    备注
                </view>
                <u--input
                    placeholder="请输入备注要求"
                    border="none"
                    v-model="value"
                />
            </view>
        </view>
		
        
        <view class="submitBox">
            <view class="priceBox">
                <view class="yfBox">
                    <text class="yf">应付：</text>
                    <text class="unit">¥</text>
                    <text class="money">209</text>
                </view>
                <view class="YHTotal">
                    总计优惠：10
                </view>
            </view>
            
            <view class="submitOrder">
                去支付
            </view>
        </view>
        <u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	import { addressCard } from "@/components/addressCard.vue"
    import { productCardCreatOrder } from "@/components/productCardCreatOrder.vue"
	export default {
		components: {
            addressCard,
            productCardCreatOrder
		},
		data() {
			return {
				address: {},
				productData: []
			};
		},
        onShow() {
        	if (uni.getStorageSync('chooseAddress')) {
        		this.$refs.addressCard.address = uni.getStorageSync('chooseAddress')
        	} else if (uni.getStorageSync('userAddress')) {
        		this.$refs.addressCard.address = uni.getStorageSync('userAddresss')
        	}
        },
        onUnload() {
        	uni.removeStorage({
        		key: 'chooseAddress'
        	})
        },
		onLoad(option) {
		    this.productData = JSON.parse(option.productData)
		},
	}
</script>

<style lang="scss" scoped>
	.creatOrderPage {
        height: 100vh;
        display: flex;
        flex-direction: column;
        .orderInfo {
            flex: 1;
            overflow-y: auto;
        	background-color: $uni-bg-color-grey;
        	padding: 20rpx 30rpx;
        	.addressCardBox {
                margin-bottom: 30rpx;
        		background-color: $uni-bg-color;
        		padding: 0 20rpx;
        		border-radius: $uni-border-radius-base;
        	}
            
            .probox {
                background-color: $uni-bg-color;
                padding: 20rpx;
                border-radius: $uni-border-radius-llg;
                
                .item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    line-height: 76rpx;
                    .left {
                        font-size: 30rpx;
                        color: $uni-text-color-grey-3;
                    }
                    .right {
                        font-family: DIN Alternate, DIN Alternate;
                        font-weight: bold;
                        font-size: 36rpx;
                        color: $uni-text-color;
                    }
                    .red {
                        color: $uni-text-color-money;
                    }
                }
                
                .divider {
                    margin: 30rpx 0;
                    border-top: 1px dashed $uni-border-color-btm;
                    position: relative;
                
                    &:before {
                        content: '';
                        display: inline-block;
                        width: 30rpx;
                        height: 30rpx;
                        background: $uni-bg-color-grey;
                        border-radius: 50%;
                        position: absolute;
                        top: -15.5rpx;
                        left: -40rpx;
                    }
                
                    &:after {
                        content: '';
                        display: inline-block;
                        width: 30rpx;
                        height: 30rpx;
                        background: $uni-bg-color-grey;
                        border-radius: 50%;
                        position: absolute;
                        top: -15.5rpx;
                        right: -40rpx;
                    }
                }
                
                .yfBox {
                    text-align: right;
                    line-height: 48rpx;
                    .yf {
                        font-size: 30rpx;
                        color: #666666;
                    }
                    .unit {
                        font-family: DIN Alternate, DIN Alternate;
                        font-weight: bold;
                        font-size: 24rpx;
                        color: $uni-text-color-money;
                    }
                    .money {
                        font-family: DIN Alternate, DIN Alternate;
                        font-weight: bold;
                        font-size: 36rpx;
                        color: $uni-text-color-money;
                    }
                }
            }
            
            .payTypeBox {
                margin-top: 30rpx;
                padding: 0 20rpx;
                height: 98rpx;
                border-radius: $uni-border-radius-base;
                background-color: $uni-bg-color;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title {
                    color: $uni-text-color-grey-3;
                    font-size: 30rpx;
                }
                .typeBox {
                    display: flex;
                    align-items: center;
                    .payIcon {
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 18rpx;
                    }
                }
            }
            
            .remakeBox {
                margin-top: 30rpx;
                padding: 30rpx 20rpx;
                background-color: $uni-bg-color;
                border-radius: $uni-border-radius-base;
                .title {
                    margin-bottom: 20rpx;
                    color: $uni-text-color-grey-3;
                    font-size: 30rpx;
                }
            }
        }
        
        .submitBox {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10rpx 30rpx;
            .priceBox {
                .yfBox {
                    .yf {
                        font-size: 30rpx;
                        color: $uni-text-color-grey-6;
                    }
                    .unit {
                        font-family: DIN Alternate, DIN Alternate;
                        font-weight: bold;
                        font-size: 24rpx;
                        color: $uni-text-color-money;
                    }
                    .money {
                        font-family: DIN Alternate, DIN Alternate;
                        font-weight: bold;
                        font-size: 36rpx;
                        color: $uni-text-color-money;
                    }
                }
                .YHTotal {
                    font-size: 24rpx;
                    color: $uni-text-color-orange;
                }
            }
            
            .submitOrder {
                width: 240rpx;
                height: 80rpx;
                background: $uni-bg-color-btn;
                border-radius: 40rpx;
                line-height: 80rpx;
                text-align: center;
                color: $uni-text-color-inverse;
            }
        }
    }
</style>
